<template>

<el-button type="primary" @click="openDrawer">选择商品</el-button>
    <el-drawer v-model="drawer" title="请选择商品" size="50%">
        
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item>
            <CategoryTree v-model="formData.categoryId" rootName="所有分类"></CategoryTree>

        </el-form-item>
        <el-form-item>
            <el-input v-model="formData.name" placeholder="请输入关键字" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onQuery">查询</el-button>
        </el-form-item>
    </el-form>
    <el-divider />
    <el-button type="primary" @click="addProduct">确定</el-button>
    <el-table :data="tableData" style="width: 100%" ref="productTableRef">
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="id" label="ID" width="80" />
        <el-table-column fixed prop="name" label="名称" width="200" />
        
        <el-table-column fixed prop="price" label="价格" width="80" >
            <template #default="scope">
               ￥ {{ scope.row.price }}
            </template>
            </el-table-column>
       
        <el-table-column prop="statusX" label="状态" width="120" />
        <el-table-column prop="seq" label="排序" width="80" />
        
    </el-table>
    
    <br/>
    <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.pageSize"
        @current-change="pageChange" />

  </el-drawer>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { productApi } from "@/api";
import CategoryTree from '@/components/CategoryTree.vue'
const drawer = ref(false)

const props = defineProps({plist:{type:Array,default:[]}})
const emits = defineEmits(['update:plist'])


const openDrawer=()=>{
    drawer.value = true
}
const addProduct=()=>{
    const rows = productTableRef.value.getSelectionRows()
    // console.log(rows);

    
    emits('update:plist',rows)

    drawer.value = false
    
}
const productTableRef=ref()
const tableData = ref([])

const pageData = reactive({
    total: 0,
    pageSize: 3,
    pageNum: 1
})

const formData = reactive({
    categoryId: 0,
    name: ''
})

onMounted(() => {
    callProductApi()
})

const pageChange = (val: number) => {
    pageData.pageNum = val
    callProductApi()
}
const callProductApi = () => {
    let name = formData.name != "" ? formData.name : undefined

    let pageNum = pageData.pageNum
    let pageSize = pageData.pageSize

    productApi.select.call({ categoryId: formData.categoryId == 0 ? undefined:formData.categoryId, name, pageNum, pageSize }).then((res: any) => {
        // console.log(res);
        pageData.total = res.total
        tableData.value = res.items

    })
}

const onQuery = () => {
    callProductApi()
}
</script>